<template>
  <div class="container">
    <div class="column">
      <div class="box-container">
        <div class="box small-box">
          <div class="large-text">24292</div>
          <div class="small-text">工会组织数</div>
        </div>
        <div class="box small-box">
          <div class="large-text">109534</div>
          <div class="small-text">覆盖企业数</div>
        </div>
        <div class="box small-box">
          <div class="large-text">4051</div>
          <div class="small-text">覆盖社会组织数</div>
        </div>
        <div class="box small-box">
          <div class="large-text">—</div>
          <div class="small-text">本年度建会完成率</div>
        </div>
      </div>
      <div class="large-box-container">
        <div class="box2 large-box" style="display: flex; flex-direction: row; justify-content: space-between;">
          <div>
            <h1 class="title">县区级/园区会员数</h1> 
            <h1 class="title">产业工会组织数</h1>
            <canvas id="myChart" width="600" height="280"></canvas>
          </div>
        </div>

        <div class="box2 large-box">
          <h1 class="title">本年度建会任务进度</h1>
          <table class="data-table">
            <thead>
              <tr>
                <th>工会名称</th>
                <th>任务数</th>
                <th>已完成数</th>
                <th>完成率</th>
              </tr>
            </thead>
            <tbody>

              <!-- 空表格，内容可以在这里添加 -->
            </tbody>
          </table>
        </div>
        
      </div>
    </div>
    <div class="column">
      <div class="box-container">
        <div class="box small-box">
          <div class="large-text">3576532</div>
          <div class="small-text">会员数</div>
        </div>
        <div class="box small-box">
          <div class="large-text">35188666</div>
          <div class="small-text">工会干部数</div>
        </div>
        <div class="box small-box">
          <div class="large-text">3550</div>
          <div class="small-text">新业态会员数</div>
        </div>
        <div class="box small-box">
          <div class="large-text">-</div>
          <div class="small-text">本年度待入会完成率</div>
        </div>
      </div>

      <div class="large-box-container">
        <div class="box2 large-box" style="display: flex; flex-direction: row;">
          <div>
            <h1 class="title">县区级/园区会员数</h1>
            <h1 class="title">产业工会会员数</h1>
            <canvas id="myChart2" width="600" height="280"></canvas>
          </div>
        </div>
        
        <div class="box2 large-box">
          <h1 class="title">本年度入会任务进度</h1>
          <table class="data-table">
            <thead>
              <tr>
                <th>工会名称</th>
                <th>总目标（人）</th>
                <th>完成率</th>
              </tr>
            </thead>
            <tbody>
              <!-- 空表格，内容可以在这里添加 -->
            </tbody>
          </table>
        </div>
      </div>

    </div>
    <div class="column">
      <div class="box-container">
        <div class="box small-box">
          <div class="large-text">3</div>
          <div class="small-text">建起来</div>
        </div>
        <div class="box small-box">
          <div class="large-text">2</div>
          <div class="small-text">转起来</div>
        </div>
        <div class="box small-box">
          <div class="large-text">0</div>
          <div class="small-text">活起来</div>
        </div>
        <div class="box small-box">
          <div class="large-text">0</div>
          <div class="small-text">强起来</div>
        </div>
      </div>
      <div class="box large-box3">
        <h1 class="title">年度目标进度</h1>
        <table class="data-table">
          <thead>
            <tr>
              <th>工会名称</th>
              <th>转起及以上占比 (%)</th>
              <th>活起及以上占比 (%)</th>
              <th>强起及以上占比 (%)</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>海曙区总工会</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
            </tr>
            <tr>
              <td>江北区总工会</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
            </tr>
            <tr>
              <td>镇海区总工会</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
            </tr>
            <tr>
              <td>北仑区总工会</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
            </tr>
            <tr>
              <td>鄞州区总工会</td>
              <td>0.06</td>
              <td>0.06</td>
              <td>0.06</td>
            </tr>
            <tr>
              <td>奉化区总工会</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
            </tr>
            <tr>
              <td>余姚市总工会</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
            </tr>
            <tr>
              <td>慈溪市总工会</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
            </tr>
            <tr>
              <td>宁海县总工会</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
            </tr>
            <tr>
              <td>象山县总工会</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
            </tr>
            <tr>
              <td>宁波前湾新区工会</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
            </tr>
            <tr>
              <td>宁波高新技术产业...</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
            </tr>
            <tr>
              <td>市财贸金融工会...</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
            </tr>
            <tr>
              <td>市海员建设工会委员会</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { Chart, registerables } from 'chart.js';
import { onMounted } from 'vue';

Chart.register(...registerables);

export default {
  name: 'Page2',
  setup() {
    onMounted(() => {
      const ctx = document.getElementById('myChart').getContext('2d');
      const myChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['海曙区', '鄞州区', '江北区', '镇海区', '北仑区'],
          datasets: [
            {
              label: '覆盖企业数',
              data: [2000, 1500, 2500, 1800, 2200],
              backgroundColor: 'rgba(255, 99, 132, 0.2)',
              borderColor: 'rgba(255, 99, 132, 1)',
              borderWidth: 1,
            },
            {
              label: '工会组织数',
              data: [1200, 800, 1500, 900, 1300],
              backgroundColor: 'rgba(54, 162, 235, 0.2)',
              borderColor: 'rgba(54, 162, 235, 1)',
              borderWidth: 1,
            },
            {
              label: '覆盖社会组织数',
              data: [800, 600, 900, 700, 1000],
              backgroundColor: 'rgba(255, 206, 86, 0.2)',
              borderColor: 'rgba(255, 206, 86, 1)',
              borderWidth: 1,
            },
          ],
        },
        options: {
          responsive: true,
          plugins: {
            legend: {
              position: 'top',
            },
            tooltip: {
              callbacks: {
                label: function (context) {
                  return context.dataset.label + ': ' + context.raw;
                },
              },
            },
          },
          scales: {
            y: {
              beginAtZero: true,
            },
          },
        },
      });

      // 新的柱状图
      const ctx2 = document.getElementById('myChart2').getContext('2d');
      const myChart2 = new Chart(ctx2, {
        type: 'bar',
        data: {
          labels: ['海曙区', '鄞州区', '江北区', '镇海区', '北仑区'],
          datasets: [
            {
              label: '县区级/园区会员数',
              data: [3000, 2500, 3500, 2800, 3200],
              backgroundColor: 'rgba(75, 192, 192, 0.2)',
              borderColor: 'rgba(75, 192, 192, 1)',
              borderWidth: 1,
            },
          ],
        },
        options: {
          responsive: true,
          plugins: {
            legend: {
              position: 'top',
            },
            tooltip: {
              callbacks: {
                label: function (context) {
                  return context.dataset.label + ': ' + context.raw;
                },
              },
            },
          },
          scales: {
            y: {
              beginAtZero: true,
            },
          },
        },
      });
    });
  },
};
</script>

<style scoped>
.title {
  text-align: left;
  font-size: 24px;
  display: flex;
}

.large-box3 {
  height: 760px; /* 调整高度以适应内容 */
  background-color: #f7f7f7;
}

.container {
  display: flex;
  justify-content: space-between;
  background-color: #fafafa;
}

.column {
  width: 40%;
}

.box-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列布局 */
  gap: 5px; /* 小盒子之间的间距，调整为更紧密 */
}

.large-box-container2 {
  display: flex;
  flex-direction: row; /* 垂直排列 */
  gap: 10px; /* 上下盒子之间的间距 */
}

.large-box-container {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  gap: 10px; /* 上下盒子之间的间距 */
}

.box2 {
  margin: 5px; /* 盒子之间的间距，调整为更紧密 */
  border: 1px solid #e0dcdc;
  padding: 10px; /* 添加内边距 */
  text-align: left; /* 内容居中 */
  font-size: 24px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.box {
  margin: 5px; /* 盒子之间的间距，调整为更紧密 */
  border: 1px solid #e0dcdc;
  padding: 10px; /* 添加内边距 */
  text-align: center; /* 内容居中 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.small-box {
  height: 100px; /* 小盒子的高度 */
  background-color: #f0f0f0;
}

.large-text {
  font-size: 32px; /* 大字的字体大小 */
  color: #1890ff; /* 蓝色 */
}

.small-text {
  font-size: 24px; /* 小字的字体大小 */
  color: #000; /* 黑色 */
}

.large-box {
  height: 360px; /* 大盒子的高度，分成上下两个盒子 */
  background-color: #f7f7f7;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px; /* 表格与上方内容的间距 */
}

.data-table th,
.data-table td {
  border: 1px solid #e0dcdc;
  padding: 8px;
  text-align: left;
}

.data-table th {
  background-color: #f0f0f0;
}
</style>
